<template>
  <div>

    <div>
      <Button type="primary" @click="manageModal" style="margin-left: 20px;float: right;">管理房屋信息</Button>
    </div>

    <Modal v-model="modal" title="房屋信息" width="1300px">
      <Button type="success" @click="showFormModal('0')" style="float:right;margin-bottom:16px;">添加房屋信息</Button>
      <Table border :columns="columns" :data="houseListRes" style="clear:both">
        <template #action="{ row }">
          <Button type="primary" size="small" style="margin-right: 5px" @click="showFormModal('1', row.id)">修改</Button>
          <Button type="warning" size="small" style="margin-right: 5px" @click="showFormModal('2', row.id)">详情</Button>
          <Button type="error" size="small" @click="del(row.id)">删除</Button>
        </template>
      </Table>
      <div slot="footer">
        <Button type="primary" size="large" @click="modal = false">关闭</Button>
      </div>
    </Modal>

    <Modal v-model="modal1" title="房屋信息" width="1300px">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="房屋名称" prop="house_name">
          <Input v-model="formValidate.house_name" :disabled="disabledFlag" placeholder="房屋名称"></Input>
        </FormItem>
        <FormItem label="房屋面积(㎡)" prop="house_area">
          <Input v-model="formValidate.house_area" :disabled="disabledFlag" placeholder="房屋面积(㎡)"></Input>
        </FormItem>
        <FormItem label="房屋地址" prop="house_addr">
          <Input v-model="formValidate.house_addr" :disabled="disabledFlag" placeholder="房屋地址"></Input>
        </FormItem>
        <FormItem label="房屋性质" prop="house_nature">
          <!-- <Input v-model="formValidate.house_nature" :disabled="disabledFlag" placeholder="房屋性质"></Input> -->
          <Select v-model="formValidate.house_nature" placeholder="房屋性质" :disabled="disabledFlag">
                <Option value="商品房">商品房</Option>
                <Option value="房改房">房改房</Option>
                <Option value="存量房">存量房</Option>
                <Option value="集资房">集资房</Option>
                <Option value="经济适用住房">经济适用住房</Option>
                <Option value="平价房">平价房</Option>
                <Option value="解困房">解困房</Option>
                <Option value="再上市房">再上市房</Option>
                <Option value="廉价住房">廉价住房</Option>
                <Option value="安居工程住房">安居工程住房</Option>
            </Select>
        </FormItem>
        <FormItem label="是否有消防物联网感知设备" prop="fire_control_equ">
          <Select v-model="formValidate.fire_control_equ" placeholder="是否有消防物联网感知设备" :disabled="disabledFlag">
                <Option value="有">有</Option>
                <Option value="无">无</Option>
          </Select>
        </FormItem>
        <!-- <FormItem label="消防物联网感知设备类型" v-if="formValidate.fire_control_equ=='有'">
          <Select v-model="formValidate.fire_control_equ_type" placeholder="请选择设备类型" :disabled="disabledFlag">
                <Option value="设备类型1">设备类型1</Option>
                <Option value="设备类型2">设备类型2</Option>
                <Option value="设备类型3">设备类型3</Option>
          </Select>
        </FormItem>
        <FormItem label="消防物联网感知设备" v-if="formValidate.fire_control_equ=='有' && formValidate.fire_control_equ_type" >
          <Select v-model="formValidate.fire_control_equ_info" placeholder="请选择设备" :disabled="disabledFlag">
                <Option value="设备1">设备1</Option>
                <Option value="设备2">设备2</Option>
                <Option value="设备3">设备3</Option>
          </Select>
        </FormItem> -->
        <FormItem label="安防设备">
          <Input v-model="formValidate.safe_control_equ" :disabled="disabledFlag" placeholder="安防设备信息"></Input>
        </FormItem>
        <FormItem label="水用量">
          <Input v-model="formValidate.water_use_range" :disabled="disabledFlag" placeholder="水用量"></Input>
        </FormItem>
        <FormItem label="电用量">
          <Input v-model="formValidate.ele_use_range" :disabled="disabledFlag" placeholder="电用量"></Input>
        </FormItem>
        <FormItem label="燃气用量">
          <Input v-model="formValidate.gas_use_range" :disabled="disabledFlag" placeholder="燃气用量"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" v-if="disabledFlag == false" @click="save()">保存</Button>
        <Button type="primary" v-if="disabledFlag" @click="modal1 = false">关闭</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
import {
  houseList, addHouse, updateHouse
} from '../../../../api/house'
export default {
  name: 'grid-house',
  data () {
    return {
      doorplate_id: '',
      formValidate: {},
      modal: false,
      modal1: false,
      ruleValidate: {
        house_name: [
          { required: true, message: '请输入房屋名称', trigger: 'blur' }
        ],
        house_area: [
          { required: true, message: '请输入房屋面积', trigger: 'blur' }
        ],
        house_addr: [
          { required: true, message: '请输入房屋地址', trigger: 'blur' }
        ],
        house_nature: [
          { required: true, message: '请选择房屋性质', trigger: 'change' }
        ],
        fire_control_equ: [
          { required: true, message: '请选择是否有消防物联网感知设备', trigger: 'change' }
        ]
      },
      houseListRes: [],
      columns: [
        {
          title: '房屋编号',
          key: 'id'
        },
        {
          title: '房屋名称',
          key: 'house_name'
        },
        {
          title: '房屋面积(㎡)',
          key: 'house_area'
        },
        {
          title: '房屋地址',
          key: 'house_addr'
        },
        {
          title: '房屋性质',
          key: 'house_nature'
        },
        // {
        //   title: '消防物联网感知设备',
        //   key: 'fire_control_equ'
        // },
        // {
        //   title: '安防设备',
        //   key: 'safe_control_equ'
        // },
        {
          title: '创建时间',
          key: 'create_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ],
      actionType: '',
      disabledFlag: false
    }
  },
  mounted () {

  },
  methods: {
    // 初始化
    initHouse (e) {
      this.doorplate_id = e
      console.log('aaaaaaaaaa', this.doorplate_id)
    },
    manageModal () {
      this.modal = true
      this.houseList()
    },
    showFormModal (actionType, id) {
      this.modal1 = true
      this.$refs['formValidate'].resetFields()
      this.formValidate = {}
      this.actionType = actionType
      if (actionType === '0') { // 添加
        this.disabledFlag = false
      } else if (actionType === '1') { // 修改
        this.infoHouse(id)
        this.disabledFlag = false
      } else if (actionType === '2') { // 详情
        this.disabledFlag = true
        this.infoHouse(id)
      }
    },
    save () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          if (this.actionType === '0') { // 添加
            this.addHouse()
          } else if (this.actionType === '1') { // 修改
            this.updateHouse()
          }
        } else {
          this.$Message.error('请完善信息!')
        }
      })
    },
    houseList () {
      let data = {
        doorplate_id: this.doorplate_id
      }
      houseList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.houseListRes = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    del (id) {
      if (confirm('确认删除？')) {
        let data = {
          id: id,
          del_flag: '1'
        }
        updateHouse(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.houseList()
            this.$Message.success('删除成功')
          } else {
            this.$Notice.error({
              title: '修改失败',
              desc: ret.data.errmsg
            })
          }
        })
      }
    },
    addHouse () {
      this.formValidate.doorplate_id = this.doorplate_id
      addHouse(this.formValidate).then(ret => {
        if (ret.data.errcode === 0) {
          this.houseList()
          this.modal1 = false
          this.$Message.success('添加成功')
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    updateHouse () {
      updateHouse(this.formValidate).then(ret => {
        if (ret.data.errcode === 0) {
          this.houseList()
          this.modal1 = false
          this.$Message.success('修改成功')
        } else {
          this.$Notice.error({
            title: '修改失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    infoHouse (id) {
      let data = {
        id: id
      }
      houseList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.formValidate = ret.data.data[0]
        } else {
          this.$Notice.error({
            title: '获取失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
